<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回首屏案例</title>
		<style type="text/css">
			#content{
				height: 2000px;
			}
			#goTop{
				width: 100px;
				height: 100px;
				background-color: #8B4513;
				text-align: center;
				line-height: 100px;
				position: fixed;
				bottom: 100px;
				right: 20px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<h2>回到顶部</h2>
			<div id="goTop">
				返回
			</div>
		</div>
		<script type="text/javascript">
		window.onload = function(){
			var goTop = document.getElementById('goTop');
			window.onscroll = function(){//滚动条事件  让谁滚动  body  html
				let res = document.body.scrollTop || document.documentElement.scrollTop;
				if(res >= 400){
					goTop.style.display = 'block';
				} else {
					goTop.style.display = 'none';
				}
				
			}
			goTop.onclick = function(){
				document.body.scrollTop = 0 ;
				document.documentElement.scrollTop = 0;
			}
		}
			
		</script>
	</body>
</html>
